<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title>信息发布</title>
		<link rel="stylesheet" href="../layui/css/layui.css"/>
		<style type="text/css">
			.addArticle-con{
				padding: 10px 15px 15px 15px;
			}
			.addArticle-con .wrap{
				padding-top: 15px;
			}
			.addArticle-con .wrap .layui-upload-list{
				margin: 0px !important;
			}
			.thumbBox{ 
				height:131px; 
				overflow:hidden; 
				border:1px solid #e6e6e6; 
				border-radius:2px; 
				cursor:pointer; 
				position:relative; 
				text-align:center; 
				line-height:133px;
				margin-bottom: 10px;
				background-color: white;
			} 
			.addArticle-con .thumbImg{ 
				max-width:100%; 
				max-height:100%; 
				border:none;
			}
			.thumbBox::after{ 
				position: absolute;
			    width: 100%;
			    height: 100%;
			    line-height: 133px;
			    z-index: 0;
			    text-align: center;
			    font-size: 20px;
			    left: 0px;
			    top: 0px;
			    color: rgb(159, 159, 159);
			}
			.thumbBox2::after{ 
			    content: "缩略图";
			}
			.addArticle-con .wrap .layui-layedit{
				background-color: white;
			}
			.addArticle-con .wrap .layui-form-item .layui-btn{
				float: right;
				margin-left: 15px;
			}
			.addArticle-con .addInfoImg{
				display: none;
				padding: 5px 10px;
			}
			.addArticle-con .addInfoImg .layui-table-cell{
				height: auto !important;
			}
			/* 隐藏页面的下载、导出图标 */
			.addArticle-con .addInfoImg .layui-table-tool-self{
				display: none;
			}
			.addArticle-con .addInfoImg .layui-table-header{
				display: none;
			}
			.layui-form-radio{
				width:90%;
				text-align:left;
			}
		</style>
	</head>
	<body>
		<div class="addArticle-con">
			<!--添加文章表单Start-->
			<form class="layui-form layui-row wrap">
				<div class="layui-col-md11">
					<div class="layui-row layui-col-space20">
						<div class="layui-col-md9 layui-col-xs7">
							<div class="layui-form-item" style="margin-bottom:30px">
								<label class="layui-form-label">文章标题</label>
								<div class="layui-input-block">
									<input id="infotitle" type="text" class="layui-input newsName" lay-verify="newsName" placeholder="请输入文章标题" autocomplete="off">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">文章内容</label>
								<div class="layui-input-block">
									<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="news_content"></textarea>
								</div>
							</div>
						</div>
						<div class="layui-col-md3 layui-col-xs5" style="text-align: center;">
							<div class="layui-form-item">
								<div class="layui-upload-list thumbBox thumbBox2" id="imgchangeimg">
									<img class="layui-upload-img thumbImg">
									<input id="inpphotoid" type="text" style="display:none"/>
								</div>
							</div>
							<div class="layui-form-item">
								 <fieldset class="layui-elem-field">
									<legend style="font-size: 16px;"><strong>信息类型</strong></legend>
									<div class="layui-form-item layui-field-box" id="divridioinfotype" style="max-height:130px;overflow: auto;">
									
									</div>
								</fieldset>
							</div>
							<div class="layui-form-item">
								 <fieldset class="layui-elem-field">
									<legend style="font-size: 16px;"><strong>是否是热点文章</strong></legend>
									<div class="layui-form-item layui-field-box" id="ridioclassifys" style="max-height:130px;overflow: auto;">
										<input id="ishottopi" type="checkbox" name="ishottopi" lay-filter="ishottopi" lay-skin="switch" lay-text="是|不是">
									</div>
								</fieldset>
							</div>
							<div class="layui-form-item">
							    <button id="btnsendinfo" type="button" class="layui-btn">发送</button>
							    <button id="btnsaveinfo" type="button" class="layui-btn">保存</button>
							</div>
						</div>
					</div>
				</div>
			</form>
			<!-- 添加文章表单end -->
			
			<!-- 弹窗调用内容开始 -->
			<div class="addInfoImg" id="addInfoImg">
				<table class="layui-hide" id="selImg" lay-filter="selImg"></table>
				<script type="text/html" id="toolbarDemo">
  					<div class="layui-btn-container">
    					<button class="layui-btn" lay-event="getCheckData">保存</button>
  					</div>
				</script>
			</div>
			<!-- 弹窗调用内容结束 -->
		</div>
	<script src="../js/jquery-3.3.1.js"></script>
	<script src="../layui/layui.all.js"></script>
	<script type="text/javascript">
	layui.use(['table','layedit','upload','form'], function(){
		var upload = layui.upload;
		var form=layui.form;
		var layedit = layui.layedit;
	  	var table = layui.table;
		
		//创建文本编辑器
		var editIndex=layedit.build('news_content', {
		    tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'link', 'unlink', 'face', 'image'],
		    height: 350,
		    uploadImage: {
				size: 200,
				url: '../articleImgUploadServlet.do', //接口url
				type: '' //默认post
			}
		});
		
		/* 加载文章类型 */
		$.ajax({
			url: '../informationmanagement/getallinfotype',  
	        type: 'get', 
	        dataType: 'json',  
	        success: function (getdata) {
	          if (getdata.code == 0) { 
	        	  var str="";
	        	  for(var i=0;i<getdata.count;i++){
	        		  str+="<input type='radio' name='infotype' value='"+getdata.data[i].typeid+"' title='"+getdata.data[i].typename+"'>";
	        	  }
	        	  $("#divridioinfotype").append(str);
	        	  form.render("radio");
	          }else {}  
	        },
	        error:function(){ }
    	});
		
		/* 选择图片弹窗 */
		$("#imgchangeimg").click(function(){
		  	var index=layer.open({
				type: 1, 
			    title: '选择文章封面图片',
		        area: ['600px', '80%'],
		        shade: 0.8,
		        content: $('#addInfoImg'),
		        cancel: function(){ 
				   $(".addInfoImg").css("display","none");
				}
		    });
		});
		
	    /* 选择图片弹窗表格 */
	    table.render({
		    elem: '#selImg',
		    url:'../sysimgmanagement/getinforimagelist',
		    toolbar: '#toolbarDemo',
		    cols: [[
				      {
				      	type:'radio'
				      },{
	                    field: 'src',
	                    title: '',
	                    unresize: true,
				      	align: 'center',
	                    sort: false,
	                    style:'height:100%; width:100%;',
	                    templet:function (d) {
	                        return '<div class="layer-photos-demo" style="cursor:pointer;"><img src="/kmsximgs/photo/'+d.path+'"></div>';
	                    }
	                }
		    ]],
		    done: function(res, curr, count) { //表格数据加载完后的事件
			    layer.photos({//点击图片弹出
			        photos: '.layer-photos-demo'
			        ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
			    });
			}
		 });
	  
	    //选择图片点击保存
	    table.on('toolbar(selImg)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'getCheckData':
		        var data = checkStatus.data;
		        $("#inpphotoid").val(data[0].photoid);
		        $(".thumbImg").attr("src","/kmsximgs/photo/"+data[0].path);
		        $("#imgchangeimg").removeClass("thumbBox2");
		        layer.closeAll();
		        $(".addInfoImg").css("display","none");
		      break;
		    };
		});
		/*保存为草稿*/
		$("#btnsaveinfo").click(function(){
			var title=$("#infotitle").val().trim();
			var content=layedit.getContent(editIndex);
			var photoid=$("#inpphotoid").val().trim();
			var infotype=$("input[name='infotype']:checked").val();
			var ishottopic=$("input[name='ishottopi']:checked").val();
			
			if(title==null || title=="" || title==undefined){
				layer.msg("添加信息标题不能为空");
				return;
			}
			if(content==null || content=="" || content==undefined){
				layer.msg("添加信息内容不能为空");
				return;
			}
			if(photoid==null || photoid=="" || photoid==undefined){
				layer.msg("请选择文章图片");
				return;
			}
			if(infotype==null || infotype=="" || infotype==undefined){
				layer.msg("请选择信息类型");
				return;
			}
			if(ishottopic=="on"){
				ishottopic=1;
			}else{
				ishottopic=0;
			}
			$.ajax({
				url: '../informationmanagement/addsavefrontinformation',  
		        type: 'get', 
		        dataType: 'json',  
		        data:{title:title,content:content,photoid:photoid,
		        	infotype:infotype,ishottopic:ishottopic},
		        success: function (data) {
		          if (data.code == 10001) {
		          	 layer.confirm(data.msg,{
							btn: ['知道了']
					 }, function() {
						 window.location.reload();
					 }); 
		          } else {  
		        	  layer.alert(data.msg, {icon: 2});
		          }  
		        }
			});
		});
		
		/*发送信息*/
		$("#btnsendinfo").click(function(){
			var title=$("#infotitle").val().trim();
			var content=layedit.getContent(editIndex);
			var photoid=$("#inpphotoid").val().trim();
			var infotype=$("input[name='infotype']:checked").val();
			var ishottopic=$("input[name='ishottopi']:checked").val();
			
			if(title==null || title=="" || title==undefined){
				layer.msg("添加信息标题不能为空");
				return;
			}
			if(content==null || content=="" || content==undefined){
				layer.msg("添加信息内容不能为空");
				return;
			}
			if(photoid==null || photoid=="" || photoid==undefined){
				layer.msg("请选择文章图片");
				return;
			}
			if(infotype==null || infotype=="" || infotype==undefined){
				layer.msg("请选择信息类型");
				return;
			}
			if(ishottopic=="on"){
				ishottopic=1;
			}else{
				ishottopic=0;
			}
			$.ajax({
				url: '../informationmanagement/addsendfrontinformation',  
		        type: 'get', 
		        dataType: 'json',  
		        data:{title:title,content:content,photoid:photoid,
		        	infotype:infotype,ishottopic:ishottopic},
		        success: function (data) {
		          if (data.code == 10001) {
		        	  layer.confirm(data.msg,{
							btn: ['知道了']
					 }, function() {
						 window.location.reload();
					 }); 
		          }else {  
		        	  layer.alert(data.msg, {icon: 2});
		          }  
		        }
			});
			
		});
	});
	</script>
	</body>
</html>
